/* eslint-disable react/style-prop-object */
import React, { useEffect,useState } from 'react';
import {Popover,Layout,Select,Form, Input, InputNumber, Button} from 'antd'
import style from './work.css'
import * as myConst from './workMessage'
const { Content } = Layout;
// const { Option } = Select;

function work(){
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 8 },
  };
  const validateMessages = {
    // eslint-disable-next-line no-template-curly-in-string
    required: "'${label}'是必选字段"
  };

  const [value,setValue] =useState();
  const [state,setState] =useState();
  const [isSubmit,setIssubmit] =useState(false);

  const onFinish = (values) => {
    console.log(values);
    //校验公式
    let timeout = (values.rmb*(values.colleague*values.work*values.sex*values.pressure))/(35*(values.worktime+values.bustime-(0.5*values.fishtime))*values.edu);
    setValue(timeout.toFixed(3));
    setIssubmit(true)
    if(timeout>2){
      setState("爽到爆炸");
      return
    }
    if(timeout>1.5){
      setState("很爽");
      return
    }
    if(timeout>0.8){
      setState("正常");
      return
    }
    if(timeout<=0.8){
      setState("很惨");
      return
    }
  }

  useEffect(()=>{
  })
  return (
    <Layout className={style.laywidth}>
      <Content style={{ padding: '0 50px' }}>
        <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
          <Form.Item  name="rmb" label={<Popover placement="rightTop"  content={myConst.explain.rmb}>平均日薪</Popover>}  rules={[{ required: true }]}>
            <Input.Password  className={style.comwidth}/>
          </Form.Item>
          <Form.Item name='work' label={<Popover placement="rightTop"  content={myConst.explain.work}>工作环境系数</Popover>} rules={[{ required: true }]}>
            <Select className={style.comwidth}>
              {
                myConst.workList.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name='pressure' label={<Popover placement="rightTop"  content={myConst.explain.pressure}>工作压力系数</Popover>} rules={[{ required: true }]}>
            <Select className={style.comwidth}>
              {
                myConst.pressureList.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name='sex' label={<Popover placement="rightTop"  content={myConst.explain.sex}>异性环境系数</Popover>} rules={[{ required: true }]}>
            <Select className={style.comwidth}>
              {
                myConst.sexList.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name='colleague' label={<Popover placement="rightTop"  content={myConst.explain.colleague}>同事环境系数</Popover>} rules={[{ required: true }]}>
            <Select className={style.comwidth}>
              {
                myConst.colleagueList.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item  name="worktime" label={<Popover placement="rightTop"  content={myConst.explain.worktime}>工作时长</Popover>}  rules={[{ required: true }]}>
            <InputNumber className={style.comwidth}/>
          </Form.Item>
          <Form.Item  name="bustime" label={<Popover placement="rightTop"  content={myConst.explain.bustime}>通勤时长</Popover>}  rules={[{ required: true }]}>
            <InputNumber className={style.comwidth}/>
          </Form.Item>
          <Form.Item  name="fishtime" label={<Popover placement="rightTop"  content={myConst.explain.fishtime}>摸鱼时长</Popover>}  rules={[{ required: true }]}>
            <InputNumber className={style.comwidth}/>
          </Form.Item>
          <Form.Item name='edu' label={<Popover placement="rightTop"  content={myConst.explain.edu}>学历系数</Popover>} rules={[{ required: true }]}>
            <Select className={style.comwidth}>
              {
                myConst.eduList.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
        {isSubmit&&<div className={style.submit}>
          <div>恭喜您，您的得分为：<span className={style.zhengshize}>{value}</span>,您的工作性价比<span className={style.zhengshize}>{state}</span></div>
          <div className={style.ps}>工作性价比低于0.8的人很惨，高于1.5的人很爽，高于2.0的人爽到爆</div>
        </div>}
      </Content>
    </Layout>
  );
}

export default work;
